import React, { useEffect} from 'react';
import { useOrders } from "../../hook/orders";
import { AudioOutlined } from '@ant-design/icons';
import { Table, Input, Button, Card,Breadcrumb} from 'antd';
import { Popconfirm, Space,message } from 'antd';
import ordersApi from "../../api/orders.js";


// eslint-disable-next-line import/no-anonymous-default-export
export default () => {
    let [{ rows, total }, { getOrders, setCurPage, setEachPage }] = useOrders();
    let dataInfo = rows;
    // console.log(dataInfo);
    useEffect(() => {
        getOrders();
    }, [getOrders]);

    const columns = [
        {
            title: '订单ID',
            dataIndex: '_id',
            render: text => <a>{text}</a>,
            align: 'center',
            width: "250px"
        },
        {
            title: '用户名',
            dataIndex: 'userId',
            align: 'center',
            width: "220px",
            render: (text, record) => (
              <span>{record.userId.username}</span>
            )
        },
        {
            title: '下单时间',
            dataIndex: 'time',
            align: 'center',
            width: "190px"
        },
        {
            title: '商品名',
            dataIndex: 'commoditiesId',
            align: 'center',
            width: "260px",
            render: (text, record) => (
                <span>{record.commoditiesId.name}</span>
              )
        },
        // {
        //     title: '数量',
        //     dataIndex: 'count',
        //     align: 'center',
        //     width: "100px"
        // },
        {
            title: '订单状态',
            dataIndex: 'state',
            align: 'center',
            width: "260px"
        },
        {
            title: '总金额',
            dataIndex: 'price',
            align: 'center',
            width: "190px"
        },
        {
            title: '操作',
            key: 'action',
            align: 'center',
            render: (text, record) => (
                <Space size="middle">
                    <Popconfirm title="确认删除？" onConfirm={() => handleDelete(record._id)}>
                        <Button type="primary" shape="round" danger>删除</Button>
                    </Popconfirm>
                </Space>
            ),
        },
    ];

    async function handleDelete(_id) {
        // console.log(_id);
        const status = await ordersApi.removeOrder({ _id })
        if (status === 200) {
            message.success({
                content: "删除成功！！！",
                duration: 1,
                onClose: () => {
                    getOrders();
                }
            });
        } else {
            message.error('删除失败！！！', () => {
            });
        
    }
}

        const { Search } = Input;

        const suffix = (
        <AudioOutlined
            style={{
            fontSize: 16,
            color: '#1890ff',
            }}
        />
        );

        const  onSearch = async value => {

            console.log(dataInfo);
            const _id = value;
            const data = await ordersApi.findOne( _id );
            dataInfo = [data];
            console.log(dataInfo);

        };

    return<div className="site-card-border-less-wrapper">
    <Space direction="vertical" style={{ width: "100%" }}>
      <Card>
        <Breadcrumb>
          <Breadcrumb.Item>主页</Breadcrumb.Item>
          {/* <Breadcrumb.Item>优惠券</Breadcrumb.Item> */}
          <Breadcrumb.Item>
          <a pef="#/info/addCoupons">订单列表</a>
          </Breadcrumb.Item>
        </Breadcrumb>
        <Search
            placeholder="请输入订单相关信息"
            enterButton="搜索"
            size="large"
            style={{width:"500px", marginTop: "20px"}}
            suffix={suffix}
            onSearch={onSearch}
        />
      </Card>
      <Card style={{  }}>
      <Table
            rowKey={record => record._id}
            columns={columns}
            pagination={{
                total,
                onChange: (page, pageSize) => {
                    setCurPage(page);
                    setEachPage(pageSize);
                },
              }}
            dataSource={dataInfo}
            expandable={{
                expandedRowRender: record => <tbody style={{ margin: 0 }}>
                    <tr style={{}}>{record.orderInfo.map(item=>item.commoditiesName)}</tr>
                    <tr style={{}}>{record.orderInfo.map(item=>item.count)}</tr>
                    <tr style={{}}>{record.orderInfo.map(item=>item.price)}</tr>
                    </tbody>,
                rowExpandable: record => record.userId !== 'Not Expandable',
              }}
        />
        {/* <Pagination defaultCurrent={1} total={total} style={{ marginTop: "20px" }} onChange={(current, pageSize) => {
            const curPage = current;
            setCurPage(curPage);
            const eachPage = pageSize;
            setEachPage(eachPage)
        }} /> */}
      </Card>
    </Space>
  </div>
}
